<script setup lang="ts">
import type { CronProps } from './types';

import { computed, ref, watch } from 'vue';

const props = defineProps<CronProps>();

const emit = defineEmits<{
    change: [name: any, value: string, from?: string];
}>();

const radioValue = ref(1);
const workday = ref(1);
const cycle01 = ref(1);
const cycle02 = ref(2);
const average01 = ref(1);
const average02 = ref(1);
const checkboxList = ref<number[]>([]);

// 计算两个周期值
const cycleTotal = computed(() => {
    const cycle01Value = props.check(cycle01.value, 1, 30);
    const cycle02Value = props.check(cycle02.value, cycle01Value ? cycle01Value + 1 : 2, 31);
    return `${cycle01Value}-${cycle02Value}`;
});

// 计算平均用到的值
const averageTotal = computed(() => {
    const average01Value = props.check(average01.value, 1, 30);
    const average02Value = props.check(average02.value, 1, 31 - average01Value || 0);
    return `${average01Value}/${average02Value}`;
});

// 计算工作日格式
const workdayCheck = computed(() => {
    return props.check(workday.value, 1, 31);
});

// 计算勾选的checkbox值合集
const checkboxString = computed(() => {
    const str = checkboxList.value.join(',');
    return str === '' ? '*' : str;
});

const radioChange = () => {
    if (radioValue.value !== 2 && props.cron.week !== '?') {
        emit('change', 'week', '?', 'day');
    }

    switch (radioValue.value) {
        case 1: {
            emit('change', 'day', '*');
            break;
        }
        case 2: {
            emit('change', 'day', '?');
            break;
        }
        case 3: {
            cycleChange();
            break;
        }
        case 4: {
            averageChange();
            break;
        }
        case 5: {
            workdayChange();
            break;
        }
        case 6: {
            emit('change', 'day', 'L');
            break;
        }
        case 7: {
            checkboxChange();
            break;
        }
    }
};

// 周期两个值变化时
const cycleChange = () => {
    cycle02.value = Number(cycleTotal.value.split('-')[1]);
    if (radioValue.value === 3) {
        emit('change', 'day', cycleTotal.value);
    }
};

// 平均两个值变化时
const averageChange = () => {
    if (radioValue.value === 4) {
        emit('change', 'day', averageTotal.value);
    }
};

// 最近工作日值变化时
const workdayChange = () => {
    if (radioValue.value === 5) {
        emit('change', 'day', `${workdayCheck.value}W`);
    }
};

// checkbox值变化时
const checkboxChange = () => {
    if (radioValue.value === 7) {
        emit('change', 'day', checkboxString.value);
    }
};

watch(radioValue, radioChange);
watch(cycleTotal, cycleChange);
watch(averageTotal, averageChange);
watch(workdayCheck, workdayChange);
watch(checkboxString, checkboxChange);

defineExpose({
    radioValue,
    workday,
    cycle01,
    cycle02,
    average01,
    average02,
    checkboxList,
});
</script>

<template>
    <el-form>
        <el-form-item>
            <div class="flex w-full">
                <el-radio v-model="radioValue" :value="1" />
                <el-text tag="b" class="w-10">每日</el-text>
                &nbsp;允许的通配符[, - * ? / L W]
            </div>
        </el-form-item>

        <el-form-item>
            <div class="flex w-full">
                <el-radio v-model="radioValue" :value="2" />
                <el-text tag="b" class="w-11">不指定</el-text>
            </div>
        </el-form-item>

        <el-form-item>
            <div class="flex w-full">
                <el-radio v-model="radioValue" :value="3" />
                <el-text tag="b" class="w-10">周期</el-text>
                从&nbsp;
                <el-input-number v-model="cycle01" :min="1" :max="30" />
                &nbsp;-&nbsp;
                <el-input-number v-model="cycle02" :min="cycle01 ? cycle01 + 1 : 2" :max="31" />&nbsp;日
            </div>
        </el-form-item>

        <el-form-item>
            <div class="flex w-full">
                <el-radio v-model="radioValue" :value="4" />
                从&nbsp;
                <el-input-number v-model="average01" :min="1" :max="30" />
                &nbsp;号开始，每&nbsp;
                <el-input-number v-model="average02" :min="1" :max="31 - average01 || 1" />
                &nbsp;日执行一次
            </div>
        </el-form-item>

        <el-form-item>
            <div class="flex w-full">
                <el-radio v-model="radioValue" :value="5" />
                <el-text tag="b" class="w-10">每月</el-text>
                &nbsp;
                <el-input-number v-model="workday" :min="1" :max="31" />&nbsp;号最近的那个工作日
            </div>
        </el-form-item>

        <el-form-item>
            <div class="flex w-full">
                <el-radio v-model="radioValue" :value="6" />
                <el-text tag="b" class="w-18">本月最后一天</el-text>
            </div>
        </el-form-item>

        <el-form-item>
            <div class="flex w-full">
                <el-radio v-model="radioValue" :value="7" />
                <el-text tag="b" class="w-10">指定&nbsp;</el-text>
                <el-select clearable v-model="checkboxList" placeholder="可多选" multiple collapse-tags :max-collapse-tags="10">
                    <el-option v-for="item in 31" :key="item" :value="item">{{ item }}</el-option>
                </el-select>
            </div>
        </el-form-item>
    </el-form>
</template>

<style scoped>
.el-radio {
    margin-right: 0;
}
</style>
